import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  Alert,
  Switch,
  ScrollView,
} from "react-native";
import { Icon } from "@rneui/themed";
import { useTheme } from "@/contexts/ThemeContext";
import { getStyles } from "./index.style";
import { SettingItem } from "./components";
import StatusDialog from "@/components/Global/Dialog";
import FormInput from "@/components/Login/components/FormInput";

interface FriendSettingProps {
  friendId?: string;
  friendName?: string;
  initialRemark?: string;
  initialBlocked?: boolean;
  onRemarkChange?: (newRemark: string) => void;
  onBlockChange?: (isBlocked: boolean) => void;
  onDelete?: () => void;
}

const FriendSetting: React.FC<FriendSettingProps> = ({
  friendId = "",
  friendName = "好友",
  initialRemark = "",
  initialBlocked = false,
  onRemarkChange,
  onBlockChange,
  onDelete,
}) => {
  const { colors } = useTheme();
  const styles = getStyles(colors);

  // 状态
  const [remark, setRemark] = useState(initialRemark);
  const [isBlocked, setIsBlocked] = useState(initialBlocked);
  const [isStarred, setIsStarred] = useState(false);
  const [isPrivate, setIsPrivate] = useState(false);
  const [isRemarkDialogVisible, setIsRemarkDialogVisible] = useState(false);
  const [tempRemark, setTempRemark] = useState(remark);
  const [remarkError, setRemarkError] = useState<string | undefined>(undefined);

  // 处理备注修改
  const handleRemarkDialogOpen = () => {
    setTempRemark(remark);
    setRemarkError(undefined);
    setIsRemarkDialogVisible(true);
  };

  const handleRemarkSave = () => {
    if (tempRemark.length > 20) {
      setRemarkError("备注名不能超过20个字符");
      return;
    }

    setRemark(tempRemark);
    setIsRemarkDialogVisible(false);
    if (onRemarkChange) {
      onRemarkChange(tempRemark);
    }
  };

  // 处理星标状态变更
  const handleStarToggle = (value: boolean) => {
    setIsStarred(value);
  };

  // 处理拉黑状态变更
  const handleBlockToggle = (value: boolean) => {
    setIsBlocked(value);
    if (onBlockChange) {
      onBlockChange(value);
    }
  };

  // 处理隐私状态变更
  const handlePrivateToggle = (value: boolean) => {
    setIsPrivate(value);
  };

  // 处理删除好友
  const handleDeleteFriend = () => {
    Alert.alert(
      "删除好友",
      `确定要删除好友"${friendName}"吗？删除后，将清空与该好友的聊天记录。`,
      [
        {
          text: "取消",
          style: "cancel",
        },
        {
          text: "删除",
          style: "destructive",
          onPress: () => {
            if (onDelete) {
              onDelete();
            }
          },
        },
      ],
      { cancelable: true }
    );
  };

  return (
    <ScrollView style={styles.container} bounces={false}>
      {/* 基本设置组 */}
      <Text style={styles.sectionTitle}>基本设置</Text>
      <View style={styles.settingGroup}>
        <SettingItem
          label="设置备注"
          onPress={handleRemarkDialogOpen}
          rightComponent={
            <Text style={styles.remarkText}>{remark || "无备注"}</Text>
          }
        />
        <SettingItem
          label="设置为星标好友"
          description="星标好友将显示在好友列表的顶部"
          showArrow={false}
          rightComponent={
            <Switch
              value={isStarred}
              onValueChange={handleStarToggle}
              trackColor={{ false: "#767577", true: colors.primary }}
              thumbColor="#f4f3f4"
            />
          }
        />
        <SettingItem
          label="加入黑名单"
          description="你将不会收到对方的消息，且你们互相看不到对方的朋友圈更新"
          showArrow={false}
          rightComponent={
            <Switch
              value={isBlocked}
              onValueChange={handleBlockToggle}
              trackColor={{ false: "#767577", true: colors.primary }}
              thumbColor="#f4f3f4"
            />
          }
        />
      </View>

      {/* 隐私设置组 */}
      <Text style={styles.sectionTitle}>隐私设置</Text>
      <View style={styles.settingGroup}>
        <SettingItem
          label="基本信息对他保密"
          showArrow={false}
          rightComponent={
            <Switch
              value={isPrivate}
              onValueChange={handlePrivateToggle}
              trackColor={{ false: "#767577", true: colors.primary }}
              thumbColor="#f4f3f4"
            />
          }
        />
      </View>

      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={styles.deleteButton}
          onPress={handleDeleteFriend}
          activeOpacity={0.7}
        >
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Icon
              name="delete-outline"
              type="material-community"
              color="#FFFFFF"
              size={18}
              style={{ marginRight: 8 }}
            />
            <Text style={styles.deleteButtonText}>删除好友</Text>
          </View>
        </TouchableOpacity>
      </View>

      <StatusDialog
        visible={isRemarkDialogVisible}
        message={{ title: "设置备注" }}
        onClose={() => setIsRemarkDialogVisible(false)}
        onConfirm={handleRemarkSave}
        onCancel={() => setIsRemarkDialogVisible(false)}
        showCancelButton={true}
      >
        <FormInput
          value={tempRemark}
          onChangeText={setTempRemark}
          placeholder="请输入备注名"
          error={remarkError}
          containerStyle={{ marginVertical: 10 }}
        />
      </StatusDialog>
    </ScrollView>
  );
};

export default FriendSetting;
